<template>
  <section class="main">
    <div class="header navh">
      <a href="#/goods" class="back">
        <van-icon name="arrow-left" size="0.48rem" />
      </a>
      <div class="detailnav">
        <li
          v-for="(e,i) in nav"
          :key="i"
          @click="gotowhere(i)"
          :class="['navname',{'curnav':i==curnav}]"
        >{{e}}</li>
        <!-- <li class="navname">评论</li>
        <li class="navname">详情</li>-->
      </div>
      <div class="more">
        <van-icon name="ellipsis" size="0.4rem" />
      </div>
    </div>
    <div class="zhuti clear">
      <div class="phonegoodsimg">
        <img :src="src" alt />
      </div>
      <div class="phonegoodsdetails">
        <div class="phonegoodstitle">
          <p class="phonetitle">{{title}}</p>
          <p class="phoneprofile">狂拽炫酷你值得拥有</p>
          <p class="phoneprice">￥{{price}}</p>
        </div>
      </div>
      <div class="addnum">
        <span class="choicenum">选择数量：</span>
        <span class="reduce" @click="reducenum">-</span>
        <input type="number" v-model="num" />
        <span class="plus" @click="plusnum">+</span>
      </div>
      <div class="phoneCoupon">
        <span>新人专享满1500减50优惠，领券立减50元</span>
      </div>
      <div class="phonelistbtn">
        <li class="goodsbtn">
          <van-icon name="chart-trending-o" size="0.24rem" />价格走势
        </li>
        <li class="goodsbtn">
          <van-icon name="volume" size="0.24rem" />降价通知
        </li>
        <li class="goodsbtn">
          <van-icon name="gift-card" size="0.24rem" />机型对比
        </li>
        <li class="goodsbtn">
          <van-icon name="gift" size="0.24rem" />开箱展示
        </li>
      </div>
      <div style="background: #f3f3f3;">
        <div class="phonecomment" style="margin-top: 0.2rem;background: #fff;">
          <div class="commentcomment">
            <p>评论</p>
            <div style="height:0.66rem;margin: 0.2rem 0;">
              <div style="float: left;">
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqRg4jtMA8v7s2oick7N32RT0bFL41Zooiaqc0icTbVicPMNrsevHf8udecP1QCiaFxfRaibJhoLmzv0Okg/132"
                />
              </div>
              <div style="float: left;">
                <div style="width: 6.2rem;padding-left:0.2rem;">
                  <span class="usernamec">陈浩明</span>
                  <span style="float: right;">2012-06-01</span>
                </div>
                <div style="padding-left:0.2rem;">
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                </div>
              </div>
            </div>
            <p style="margin:0.2rem 0 0.6rem 0">我要买10打！</p>
            <div style="height:0.66rem;margin: 0.2rem 0;">
              <div style="float: left;">
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqRg4jtMA8v7s2oick7N32RT0bFL41Zooiaqc0icTbVicPMNrsevHf8udecP1QCiaFxfRaibJhoLmzv0Okg/132"
                />
              </div>
              <div style="float: left;">
                <div style="width: 6.2rem;padding-left:0.2rem;">
                  <span class="usernamec">陆宝</span>
                  <span style="float: right;">2014-08-15</span>
                </div>
                <div style="padding-left:0.2rem;">
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                </div>
              </div>
            </div>
            <p style="margin:0.2rem 0 0.6rem 0">戳楼上屁眼！</p>
            <div style="height:0.66rem;margin: 0.2rem 0;">
              <div style="float: left;">
                <img
                  src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqRg4jtMA8v7s2oick7N32RT0bFL41Zooiaqc0icTbVicPMNrsevHf8udecP1QCiaFxfRaibJhoLmzv0Okg/132"
                />
              </div>
              <div style="float: left;">
                <div style="width: 6.2rem;padding-left:0.2rem;">
                  <span class="usernamec">许梦</span>
                  <span style="float: right;">2014-08-22</span>
                </div>
                <div style="padding-left:0.2rem;">
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                  <van-icon name="star" size="0.2rem" color="red" />
                </div>
              </div>
            </div>
            <p style="margin:0.2rem 0 0.6rem 0">苹果好吃！</p>
          </div>
        </div>
      </div>
      <div style="background: #f3f3f3;">
        <div style="margin-top: 0.2rem;background: #fff;font-size:0.24rem;padding:0.2rem">
          <p style="font-weight:900;">问大家</p>
          <p style="margin:0.8rem;">这里什么都没有</p>
        </div>
      </div>
      <a href="javascript:" class="toTop"></a>
      <div class="imgdetails" style="background: #f3f3f3;">
        <div style="margin-top: 0.2rem;background: #fff;font-size:0.24rem;padding:0.2rem">
          <p style="font-weight:900;">详情</p>
          <img
            src="https://img2.ch999img.com/pic/edt/product/20191211/20191211114602_4054.jpg.webp"
          />
          <img
            src="https://img2.ch999img.com/pic/edt/product/20191211/20191211114602_4054.jpg.webp"
          />
        </div>
      </div>
    </div>

    <footer class="datianxian">
      <li>
        <van-icon name="service" size="0.36rem" />
        <p>客服</p>
      </li>
      <li>
        <van-icon name="star" size="0.36rem" />
        <p>收藏</p>
      </li>
      <a href="#/cart" class="gotothecart">
        <li>
          <van-icon name="cart" size="0.36rem" :info="this.$store.state.cart" />
          <p>购物车</p>
        </li>
      </a>

      <div class="addcarto" @click="addcart">加入购物车</div>
      <div class="purchase">立即购买</div>
    </footer>
  </section>
</template>
<script>
import $ from "../../node_modules/jquery/dist/jquery";
export default {
  data() {
    var data = this.$router.history.current.query;
    return {
      src: data.src,
      title: data.name + data.title,
      goodid: data.good_id,
      price: data.price,
      nav: ["商品", "评论", "详情"],
      curnav: 0,
      pos: 0,
      flag: true,
      num: 1
    };
  },
  methods: {
    addcart() {
      // window.console.log(window.sessionStorage.id);
      // window.console.log(this.num, this.goodid);
      let id;
      if (localStorage.checked == "true") {
        id = localStorage.id;
      } else if (localStorage.checked == "false") {
        id = sessionStorage.id;
      }
      let num;
      num = this.num * 1;
      $.ajax({
        type: "post",
        url: "/goods/cart",
        data: {
          type: "add",
          good_id: this.goodid * 1,
          id: id * 1,
          num: num
        },
        dataType: "json",
        success: response => {
          
          window.location.href = "#/cart";
          location.reload();
        }
      });
    },
    reducenum() {
      this.num -= 1;
      if (this.num == 0) {
        this.num = 1;
      }
    },
    plusnum() {
      this.num += 1;
      window.console.log(this.num);
    },

    gotowhere(i) {
      this.flag = false;
      this.curnav = i;
      if (i == 0) {
        this.pos = 0;
      } else if (i == 1) {
        this.pos = 600;
      } else {
        this.pos = 1080;
      }
      $(".main")
        .stop()
        .animate(
          {
            scrollTop: this.pos
          },
          () => {
            this.flag = true;
          }
        );
    }
  },
  mounted() {
    window.console.log(this.goodid);
    $(".main").scroll(() => {
      if (this.flag) {
        if ($(".main").scrollTop() >= 600 && $(".main").scrollTop() < 1080) {
          this.curnav = 1;
        } else if ($(".main").scrollTop() >= 1080) {
          this.curnav = 2;
        } else if ($(".main").scrollTop() < 600) {
          this.curnav = 0;
        }
      }
      //   window.console.log($(".main").scrollTop());
    });
  }
};
</script>
<style>
.navh {
  position: sticky;
  top: 0;
  z-index: 999;
}
.detailnav {
  text-align: center;
  height: 0.88rem;
  margin-left: 1.3rem;
  float: left;
}

.navname {
  float: left;
  font-size: 0.28rem;
  margin: 0 0.22rem;
  line-height: 0.88rem;
}
.curnav {
  font-size: 0.32rem;
  color: red;
  border-bottom: 2px solid red;
}
.more {
  float: right;
}
.phonegoodsimg img {
  width: 100vw;
  height: 100vw;
}
.phonegoodsdetails {
  width: 7.1rem;
  margin: 10px;
}
.phonetitle {
  font-size: 0.32rem;
  line-height: 0.44rem;
  color: #333;
  font-weight: 700;
}
.phoneprofile {
  font-size: 0.24rem;
  line-height: 0.6rem;
  color: red;
}
.phoneprice {
  font-weight: 700;
  font-size: 0.4rem;
  color: red;
}
.phoneCoupon {
  background-color: #faf2d9;
  width: 100%;
  height: 0.88rem;
  font-size: 0.28rem;
  line-height: 0.88rem;
  margin: 0.1rem 0;
}
.phoneCoupon span {
  padding-left: 10px;
}
.phonelistbtn {
  height: 0.6rem;
  font-size: 0.28rem;
  margin-left: 0.4rem;
}
.goodsbtn {
  float: left;
  width: 1.76rem;
  line-height: 0.6rem;
}
.commentcomment {
  padding: 0.2rem;
}
.phonecomment {
  font-size: 0.28rem;
}
.phonecomment p {
  font-weight: 900;
}
.phonecomment img {
  border-radius: 50%;
  width: 0.66rem;
  height: 0.66rem;
}
.imgdetails img {
  width: 100%;
}
.datianxian {
  border-top: 1px solid #f5f5f5;
  background: #fff;
  position: absolute;
  bottom: 0;
}
.datianxian li {
  float: left;
  font-size: 0.24rem;
  text-align: center;
  width: 1.1rem;
  height: 0.88rem;
}
.datianxian li i {
  margin-top: 0.1rem;
}
.addcarto {
  font-size: 0.28rem;
  width: 2.06rem;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  float: left;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
}
.purchase {
  font-size: 0.28rem;
  float: left;
  background: red;
  color: #fff;
  width: 2.1rem;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
}
.addnum {
  font-size: 0.28rem;
  margin-left: 0.2rem;
}
.reduce,
.plus {
  display: inline-block;
  text-align: center;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid #ccc;
}
.addnum input {
  width: 0.6rem;
  text-align: center;
}
.gotothecart {
  color: #000;
}
</style>